<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
  <title>选择地区</title>
  <script src="${ctx}/static/helper/select-area-modal.js" type="text/javascript"></script>
  <style type="text/css">
    #select_area_modal {
      width: 800px;
      margin-left: -400px;
    }
    #select_area_modal .modal-body {
      max-height: 520px;
      padding-top: 0;
    }
    .sub_title {
      margin: 10px 0 5px 0;
      font-size: 18px;
      font-weight: bold;
    }
    .area_table {
      font-size: 12px;
    }
    .area_table td {
      width: 85px;
      height: 20px;
      padding-left: 1px;
      cursor: pointer;
    }
    .area_table td.char4 {
      width: 120px;
    }
    .area_table td.hot {
      font-weight: bold;
    }
    .area_table td.hl {
      background-color: #ffa22e;
      color: #ffffff;
    }
    .caption_letter {
      padding-top: 3px;
      vertical-align: top;
      text-align: center;
      color: #ff7400;
      font-weight: bold;
      font-size: 14px;
    }
    .sub_area_table {
      border: 1px solid #ff7b00;
      background-color: #feffef;
      position: absolute;
      z-index: 9999;
    }
    .sub_area_table td {
      width: 120px;
      background-color: #feffef;
    }
  </style>
  <script type="text/javascript">
    var cities = $.parseJSON('${cities}');
  </script>
</head>
<body>
  <div class="modal-header">
    <div class="row">
      <div class="span2"><strong>请选择工作地点</strong></div>
      <div class="pull-right">
        <a href="#" class="btn btn-primary" id="select_industry_modal_close">关闭</a>
        <a href="#" class="btn btn-primary" id="select_industry_modal_any">不限</a>
      </div>
    </div>
  </div><!--Modal header-->
  <div class="modal-body">
    <div class="sub_title">主要城市：</div>
    <table id="city_table" class="area_table">
      <tbody>
        <tr>
          <td class="caption_letter">A</td>
          <td>鞍山</td>
          <td colspan="6"></td>
          <td class="caption_letter">L</td>
          <td>兰州</td>
          <td>廊坊</td>
          <td>临沂</td>
          <td>洛阳</td>
          <td>连云港</td>
          <td>柳州</td>
          <td></td>
        </tr>
        <tr>
          <td class="caption_letter">B</td>
          <td class="hot">北京</td>
          <td>包头</td>
          <td>保定</td>
          <td colspan="4"></td>
          <td class="caption_letter">M</td>
          <td>绵阳</td>
          <td colspan="6"></td>
        </tr>
        <tr>
          <td class="caption_letter">C</td>
          <td>长春</td>
          <td>长沙</td>
          <td>成都</td>
          <td>重庆</td>
          <td>常州</td>
          <td>常德</td>
          <td>常熟</td>
          <td class="caption_letter">N</td>
          <td>南京</td>
          <td>宁波</td>
          <td>南昌</td>
          <td>南通</td>
          <td>南宁</td>
          <td colspan="2"></td>
        </tr>
        <tr>
          <td class="caption_letter">D</td>
          <td>大连</td>
          <td>东莞</td>
          <td>丹东</td>
          <td>大庆</td>
          <td colspan="3"></td>
          <td class="caption_letter">Q</td>
          <td>青岛</td>
          <td>泉州</td>
          <td>秦皇岛</td>
          <td>清远</td>
          <td colspan="3"></td>
        </tr>
        <tr>
          <td class="caption_letter">E</td>
          <td class="char4">鄂尔多斯</td>
          <td colspan="6"></td>
          <td class="caption_letter">S</td>
          <td class="hot">上海</td>
          <td class="hot">深圳</td>
          <td>沈阳</td>
          <td>石家庄</td>
          <td>苏州</td>
          <td>三亚</td>
          <td>绍兴</td>
        </tr>
        <tr>
          <td class="caption_letter">F</td>
          <td>福州</td>
          <td>佛山</td>
          <td>抚顺</td>
          <td colspan="4"></td>
          <td class="caption_letter"> </td>
          <td>汕头</td>
          <td>顺德</td>
          <td colspan="5"></td>
        </tr>
        <tr>
          <td class="caption_letter">G</td>
          <td class="hot">广州</td>
          <td>贵阳</td>
          <td>赣州</td>
          <td colspan="4"></td>
          <td class="caption_letter">T</td>
          <td>天津</td>
          <td>太原</td>
          <td>台州</td>
          <td>唐山</td>
          <td>泰州</td>
          <td>铁岭</td>
          <td></td>
        </tr>
        <tr>
          <td class="caption_letter">H</td>
          <td>哈尔滨</td>
          <td>杭州</td>
          <td>合肥</td>
          <td>海口</td>
          <td class="char4">呼和浩特</td>
          <td>惠州</td>
          <td>衡阳</td>
          <td class="caption_letter">W</td>
          <td>武汉</td>
          <td>无锡</td>
          <td>温州</td>
          <td class="char4">乌鲁木齐</td>
          <td>芜湖</td>
          <td>潍坊</td>
          <td>威海</td>
        </tr>
        <tr>
          <td class="caption_letter"> </td>
          <td>淮安</td>
          <td>湖州</td>
          <td>邯郸</td>
          <td colspan="4"></td>
          <td class="caption_letter">X</td>
          <td>西安</td>
          <td>厦门</td>
          <td>徐州</td>
          <td>襄阳</td>
          <td>湘潭</td>
          <td>咸阳</td>
          <td></td>
        </tr>
        <tr>
          <td class="caption_letter">J</td>
          <td>济南</td>
          <td>嘉兴</td>
          <td>金华</td>
          <td>吉林</td>
          <td>江门</td>
          <td>荆州</td>
          <td>江阴</td>
          <td class="caption_letter">Y</td>
          <td>烟台</td>
          <td>扬州</td>
          <td>宜昌</td>
          <td>盐城</td>
          <td>义乌</td>
          <td>营口</td>
          <td>银川</td>
        </tr>
        <tr>
          <td class="caption_letter"> </td>
          <td>济宁</td>
          <td>九江</td>
          <td colspan="5"></td>
          <td class="caption_letter">Z</td>
          <td>漳州</td>
          <td>郑州</td>
          <td>中山</td>
          <td>珠海</td>
          <td>镇江</td>
          <td>株洲</td>
          <td>湛江</td>
        </tr>
        <tr>
          <td class="caption_letter">K</td>
          <td>昆明</td>
          <td>昆山</td>
          <td colspan="5"></td>
          <td class="caption_letter"> </td>
          <td>肇庆</td>
          <td>张家港</td>
          <td>淄博</td>
          <td colspan="4"></td>
        </tr>
      </tbody>
    </table>
    <div class="sub_title">所有省份：</div>
    <table id="province_table" class="area_table">
      <tr>
        <td class="caption_letter">A-G</td>
        <td province_id="34">安徽省</td>
        <td province_id="35">福建省</td>
        <td province_id="62">甘肃省</td>
        <td province_id="44">广东省</td>
        <td province_id="45">广西</td>
        <td province_id="52">贵州省</td>
        <td colspan="3"></td>
      </tr>
      <tr>
        <td class="caption_letter">H-J</td>
        <td province_id="46">海南省</td>
        <td province_id="13">河北省</td>
        <td province_id="41">河南省</td>
        <td province_id="23">黑龙江省</td>
        <td province_id="42">湖北省</td>
        <td province_id="43">湖南省</td>
        <td province_id="22">吉林省</td>
        <td province_id="32">江苏省</td>
        <td province_id="36">江西省</td>
      </tr>
      <tr>
        <td class="caption_letter">L-S</td>
        <td province_id="21">辽宁省</td>
        <td province_id="15">内蒙古</td>
        <td province_id="64">宁夏</td>
        <td province_id="63">青海省</td>
        <td province_id="37">山东省</td>
        <td province_id="14">山西省</td>
        <td province_id="61">陕西省</td>
        <td province_id="51">四川省</td>
        <td></td>
      </tr>
      <tr>
        <td class="caption_letter">T-Z</td>
        <td province_id="54">西藏</td>
        <td province_id="65">新疆</td>
        <td province_id="53">云南省</td>
        <td province_id="33">浙江省</td>
        <td colspan="5"></td>
      </tr>
    </table>
  </div><!--Modal body-->
  <c:set var="cityNumberPerLine" value="4" />
  <c:forEach items="${provinces}" var="province">
  <c:if test="${fn:length(province.cities) gt 1}">
  <table id="province${province.id}" border="0" cellpadding="0" cellspacing="0" class="area_table sub_area_table hide">
    <tr>
      <td colspan="${cityNumberPerLine}" class="hot" area_id="${province.id}">${province.name}</td>
    </tr>
    <tr>
    <c:forEach items="${province.cities}" var="city" varStatus="status">
      <td area_id="${city.id}">${city.name}</td>
    <c:if test="${status.count % cityNumberPerLine eq 0}"></tr><tr></c:if>
    </c:forEach>
    <c:if test="${fn:length(province.cities) % cityNumberPerLine ne 0}"><td colspan="${cityNumberPerLine - fn:length(province.cities) % cityNumberPerLine}"></td></c:if>
    </tr>
  </table>
  </c:if>
  </c:forEach>
</body>
</html>
